<template>
	<view>
		<u-navbar fixed placeholder leftIcon="" title="校友圈" right-icon="plus-circle" @rightClick="goPublish"></u-navbar>
		<view class="content" style="background-color: #fff;">
			<z-paging ref="paging" style="top: calc(44px + var(--status-bar-height));" fixed 
      use-safe-area-placeholder refresher-vibrate refresher-background="#ffffff" refresher-only
			@query="onRefresh" safe-area-inset-bottom show-refresher-when-reload show-refresher-update-time @scroll="onScroll">
				<template #refresher="{refresherStatus}">
					<c-custom-refresher :status="refresherStatus" />
				</template>
				<u-gap height="10px" bg-color="#f5f5f5"></u-gap>
				<view v-if="dataList.length != 0">
					<view class="item" v-for="(item, index) in dataList" :key="item.id">
						<view class="album">
							<view class="album__header" @click="goUserInfo(item)">
								<view class="album__avatar">
									<u-avatar :src="item.anonymous ? '/static/avatar/default.png' : fileUrl + item.avatar" :size="48"></u-avatar>
								</view>
								<view class="album__user" style="margin-right: 10px;">
									<view class="name">{{ item.author }}</view>
									<view class="dept">{{ item.clazz }}</view>
								</view>
								<view class="user_name_tag" v-show="item.userId == $store.getters.id">我</view>
							</view>
							<view class="album__content">
								<view class="album__content_text" @click="goDetail(item)">
									<u-parse :content="item.content" :style="{ height: item.toggle || item.row < 5 ? 'auto' : '110px', overflow: 'hidden' }"></u-parse>
									<view class="toggleBtn" v-if="item.row > 5" @click.self.stop="open(item)">{{ item.toggle ? '收起' : '展开' }}</view>
								</view>
								<c-album-list :urls="item.images" :multipleSize="multipleSize" :space="10"></c-album-list>
							</view>
							<u-gap height="5" bgColor="#f5f5f5"></u-gap>
							<view class="album__footer">
								<view>
									<image src="/static/tab2/icon_views.png"></image>
									<text>{{ item.views }}</text>
								</view>
								<view>
									<image src="/static/tab2/icon_comments.png"></image>
									<text>{{ item.comments }}</text>
								</view>
								<view @click="handleLikes(item, index)">
									<c-likes :liked="item.liked"></c-likes>
									<text>{{ item.likes }}</text>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="loadMore" nomore-text="到底了~" bg-color="#f5f5f5" 
					margin-top="0" margin-bottom="0" style="padding: 10px 0 20px;" />
				</view>
				<u-empty v-else icon="/static/no_data.png" text="暂无内容" :marginTop="200"></u-empty>
			</z-paging>
		</view>
	</view>
</template>

<script>
import mixin from '@/mixin'
import { 
	getForumList,
	forumLikes
} from '@/api/forum'
export default {
	data() {
		return {
			canRefresh: true,
			isRefresh: false,
			dataList: [],
			multipleSize: 70,
			content: '',
			val: 2,
			toggle: false,
			loading: false,
			current: 1,
		};
	},
	mixins: [mixin],
	created() {
		this.getDataList()
	},
	mounted() {
		
	},
	methods: {
		getDataList(isRefresh) {
			// uni.$emit('hideLoading')
			const params = {}
			params.size = 20
			params.current = this.current
			params.siftStatus = '2'
			params.uid = this.$store.getters.id
			getForumList(params).then(res => {
				console.log(res);
				if(res.code === 200) {
					this.total = res.data.total
					if(isRefresh) {
						this.dataList = []
					}
					res.data.list.forEach(item => {
						const images = []
						let index = item.content.indexOf('</p>')
						item.row = 0
						while(index != -1) {
							index = item.content.indexOf('</p>', index + 1)
							item.row++
						}
						JSON.parse(item.images).map(img => {
							images.push(this.fileUrl + img)
						})
						item.images = images
						this.dataList.push(item)
					})
					this.$refs.paging.complete()
				}
			})
		},
		goPublish() {
			uni.navigateTo({
				url: '/pages/tab2/publish/index',
				animationType: 'slide-in-bottom'
			})
		},
		goUserInfo(item) {
			if(item.userId == this.$store.getters.id) {
				return
			}
			uni.navigateTo({
				url: `/pages/tab2/person/index?uid=${item.userId}`
			})
		},
		goDetail(item) {
			uni.navigateTo({
				url: `/pages/tab2/detail/index?id=${item.id}`
			})
		},
		open(item) {
			const index = this.dataList.findIndex(data => {
				return data.id == item.id
			})
			this.$set(this.dataList[index], 'toggle', !item.toggle)
		},
		handleLikes(item, index) {
			forumLikes(item.id, this.$store.getters.id).then(res => {
				if(res.code === 200) {
					this.$toast.show({
						msg: res.msg
					})
					if(res.data) {
						this.$set(this.dataList[index], 'likes', this.dataList[index].likes + 1)
						this.$set(this.dataList[index], 'liked', true)
					}else {
						this.$set(this.dataList[index], 'likes', this.dataList[index].likes - 1)
						this.$set(this.dataList[index], 'liked', false)
					}
				}
			})
		}
	},
	updated() {
		const dom = uni.createSelectorQuery().in(this).select('.content')
		dom.boundingClientRect((info) => {
			this.multipleSize = (info.width - 60) / 3
		}).exec()
	}
}
</script>

<style lang="scss" scoped>
.user_name_tag {
	background-color: #ccc;
	padding: 1px 5px;
	border-radius: 4px;
	color: #666;
	font-size: 10px;
	line-height: 14px;
	font-weight: bold;
}
</style>